<template>
  <div>
    <div class="back" @click="changefather('defaultcom')">&lt;&lt;基本信息</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
      <span class="form-title">修改信息</span>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" @focus="openReset" type="text"></el-input>
      </el-form-item>

      <el-form-item label="原密码" prop="oldpwd">
        <el-input v-model="ruleForm.oldpwd" @focus="openReset" type="password"></el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="newpwd">
        <el-input v-model="ruleForm.newpwd" @focus="openReset" type="password"></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="againpwd">
        <el-input v-model="ruleForm.againpwd" @focus="openReset" type="password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="openMsgBox" ref="reset" :disabled="disabled">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  created() {
    this.loadData();
  },
  data() {
    var checkUserName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("用户名不能为空"));
      }

      let reg = /^[\u4E00-\u9FA5a-zA-Z0-9]{2,10}$/;
      if (!reg.test(value)) {
        callback(new Error("用户名必须为2-10的汉字,英文字母,数字"));
      } else {
        callback();
      }
    };
    var validateOldPwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入原密码"));
      } else {
        let reg = /^(?=.*[0-9]).{4,30}$/;
        if (!reg.test(value)) {
          callback(new Error("密码中必须包含数字，且密码最低为4为字符"));
        } else {
          this.$axios
            .post("/api/users/checkPwd", { pwd: value })
            .then(res => {
              console.log("密码校验接口获取成功", res);
              console.log(res.data.data);
              if (res.data.data == 0) {
                callback(new Error("请输入正确的原密码"));
              } else {
                callback();
              }
            })
            .catch(err => {
              console.log("密码校验接口获取失败", err);
            });
        }
      }
    };
    var validateNewPwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else {
        let reg = /^(?=.*[0-9])(?=.*[a-zA-Z]).{4,30}$/;
        if (!reg.test(value)) {
          callback(new Error("密码中必须包含字母、数字"));
        } else {
          this.$refs.ruleForm.validateField("againpwd");
        }
        callback();
      }
    };
    var validateAgainPwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value != this.ruleForm.newpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
      }
      callback();
    };
    return {
      ruleForm: {
        username: "",
        oldpwd: "",
        newpwd: "",
        againpwd: ""
      },
      rules: {
        username: [{ validator: checkUserName, trigger: "blur" }],
        oldpwd: [{ validator: validateOldPwd, trigger: "blur" }],
        newpwd: [{ validator: validateNewPwd, trigger: "blur" }],
        againpwd: [{ validator: validateAgainPwd, trigger: "blur" }]
      },
      disabled: true
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/api/users/getUserInfo")
        .then(res => {
          console.log("userinfo", res);
          this.ruleForm.username = res.data.data[0].userName;
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    changefather(p1) {
      this.$parent.changesoncom(p1);
    },
    showMsg(msg, type) {
      this.$message({
        message: msg,
        type: type
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.changeUserInfo(this.ruleForm.username, this.ruleForm.newpwd);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      let name = this.ruleForm.username;
      this.$refs[formName].resetFields();
      this.ruleForm.username = name;
    },
    changeUserInfo(name, pwd) {
      this.$axios
        .post("/api/users/changeUserInfo", { userName: name, userPwd: pwd })
        .then(res => {
          this.showMsg("个人信息修改成功,请重新登录", "success");
          localStorage.removeItem("MYToken");
          this.$router.push("/login");
        })
        .catch(err => {
          console.log("修改信息接口访问失败", err);
        });
    },
    openMsgBox() {
      this.$confirm("您确定要放弃此次操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        this.resetForm("ruleForm");
      });
    },
    openReset() {
      this.disabled = false;
    }
  }
};
</script>
<style scoped  lang="scss">
.back {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #e6a23c;
  margin-bottom: 15px;
}
.back:hover {
  color: #e6a23c;
  opacity: 0.8;
}
/deep/.el-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0 0 8px #ccc;
  .el-form-item {
    width: 400px;
    height: 60px !important;
    .el-input__inner:focus {
      border: 1px solid #e6a23c;
    }
    .el-button {
      width: 100px;
    }
    .el-button--primary {
      background-color: #e6a23c;
      outline: none;
      border: none;
    }
    .el-button--primary:hover {
      opacity: 0.8;
    }
    .el-button--default:not([disabled]):hover {
      background-color: #fcfdfa;
      border: 1px solid #e6a23c;
      color: #e6a23c;
    }
    .el-button--default:focus {
      background-color: #e1fab8;
      border: 1px solid #e6a23c;
      color: #e6a23c;
    }
  }
}
.form-title {
  height: 30px;
  font-size: 20 px;
  margin: 40px 340px 30px 0px;
}
</style>